import { Component, OnInit } from '@angular/core';
// 引入响应式表单的模块
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
// 导入 UserName接口
import { UserName } from '../app.interface';
// 导入自定义验证
import { emailMatcher } from './email-match';

@Component({
  selector: 'app-reactive-from',
  templateUrl: './reactive-from.component.html',
  styleUrls: ['./reactive-from.component.scss']
})
export class ReactiveFromComponent implements OnInit {
  // 数据对象-- 对应的FromGroup类
  user: FormGroup;

  onSubmit({ value, valid }: { value: UserName, valid: boolean }) {
    console.log(value, valid);
  }
  // 引入FormBuilder
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    // 1.使用 FormBuilder 对象提供的 group() 方法，来创建 FormGroup 和 FormControl 对象
    this.user = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(6)]],
      account: this.fb.group({
        email: ['', Validators.required],
        confirm: ['', Validators.required],
      }, { validator: emailMatcher }),
    });
    // 2.使用 FormGroup 和 FromControl
    // this.user = new FormGroup({
    //   name: new FormControl('', [ Validators.required, Validators.minLength(6) ]),
    //   // FormGroup - 包含是一组 FormControl 实例，可用于跟踪 FormControl 组的值和验证状态，此外也提供了一系列公共API。
    //   account: new FormGroup({
    //     // FormControl - 它是一个为单个表单控件提供支持的类，可用于跟踪控件的值和验证状态，此外还提供了一系列公共API
    //     email: new FormControl('', [ Validators.required ]),
    //     confirm: new FormControl('', [ Validators.required ]),
    //   }),
    // });
  }

}
